<template>
	<div class="flex-1 flex flex-col">
		<base-nav-bar titleT="agent.title" is-goback></base-nav-bar>
		<div class="base-switch-tabs-wrapper">
			<base-switch-tabs
				:data="tabList"
				v-model="tab"
				translation
				activeTextBold
				class="!justify-start my-4" />
		</div>
		<router-view></router-view>
	</div>
</template>

<script setup lang="ts">
import { BaseSwitchTabs, BaseNavBar } from '@/components/base'
import { SwitchTabsType } from '@/components/base/switch-tabs/types.ts'
import { ref, watch } from 'vue'
import { useRouter } from 'vue-router'
import { find } from 'lodash-es'
const router = useRouter()

const tabList: SwitchTabsType = [
	{ id: 'overview', name: 'agent.overview' },
	{ id: 'income', name: 'agent.income' },
	{ id: 'subordinate', name: 'agent.subordinate' },
	{ id: 'activity', name: 'agent.activity' },
	{ id: 'formula', name: 'agent.formula' }
]

const getTabItem = () => find(tabList, { id: router.currentRoute.value.path.split('/').pop() })
const tab = ref<string | number>(getTabItem()?.id || 'overview')

watch(tab, (id) => router.replace({ name: `agent.${id}` }))
watch(router.currentRoute, () => {
	const id = getTabItem()?.id
	!!id && (tab.value = id)
})
</script>
<style scoped>
.base-switch-tabs-wrapper {
	padding-left: 10px;
	margin-top: 24px;
	margin-bottom: 24px;
	border-radius: 8px;
	background: var(--color-bg-1);
}

:deep(.base-switch-tabs__item) {
	border-radius: 99px;
}
</style>
